import React,{PropTypes} from 'react';
import {reduxForm} from 'redux-form';
import {Input} from 'react-bootstrap';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import CircularProgress from 'material-ui/CircularProgress';
import Icon from '../shared/Icon';
import {connect} from 'react-redux';
import {login, logout, loginPrompt, loginCancel,register,switchRegister,switchLogin} from '../.././actions/authentication';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const style = {
    btnStyle: {
        marginTop: 40,
        marginRight: 23,
        width: "20%"
    },
    inputStyle: {
      width: "50%"
    },
    circleStyle: {
      position: 'absolute',
      left: '13%',
      top: '13%'
    }
}

class RegisterForm extends React.Component {

    constructor(props) {
      super(props);
    }

    onSubmit(e) {
      e.preventDefault();
      const { email, password ,username, sid} = this.refs;
      const data = {
        email: email.input.value,
        password: password.input.value,
        username: username.input.value,
        sid: sid.input.value
      };
      this.props.register(data);
    }

    onReset(e) {
      e.preventDefault();
    }

    render() {
      const {fields: {email, password,username,sid}, registerError, applicationName, isRegister, inRegister,submitting} = this.props;

      return (
        <MuiThemeProvider>
        <div>
          {submitting ?
            <div className = {'circle-content'}>
              <CircularProgress size={1.5} style={style.circleStyle}/>
            </div> : null
         }
          <form onSubmit = {this.onSubmit.bind(this)}>
              <div>
                  <h2 className={'title-content'}>注册{applicationName}系统</h2>
                  <TextField
                    defaultValue="Username Value"
                    type="text" {...email} placeholder="Email" style={style.inputStyle}
                    errorText= { email.touched && email.error}
                    ref= "email"
                  /><br />
              </div>
              <TextField
                defaultValue="Password Value"
                type="password" {...password} placeholder="Password"  style={style.inputStyle}
                errorText= { password.touched && password.error }
                ref= "password"
              /><br /> 

              <TextField
                defaultValue="User Value"
                type="text" {...username} placeholder="Username"  style={style.inputStyle}
                errorText= { username.touched && username.error}
                ref= "username"
              /><br />
              <TextField
                defaultValue="Sid Value"
                type="text" {...sid} placeholder="Sid"  style={style.inputStyle}
                errorText= { sid.touched && sid.error}
                ref= "sid"
              /><br />
              <div>
                <RaisedButton label="Register" type="submit" primary={true} style={style.btnStyle} disabled = {sid.error || password.error || email.error || username.error || submitting ? true: false}/>
                <RaisedButton label="Reset" type="button" primary={true} style={style.btnStyle} onClick={this.onReset.bind(this)}/>
              </div>
          </form>
          <div className={'error-content'}>{registerError}</div>
        </div>
        </MuiThemeProvider>
      );
    }
};


const validate = (values) => {
  const errors = {}
  if (!values.email) {
    errors.email = 'Required'
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address'
  }
  if (!values.password) {
    errors.password = 'Required'
  } 
  if (!values.username) {
    errors.username = 'Required'
  } else if (values.username.length > 15) {
    errors.username = 'Must be 15 characters or less'
  }
  if (!values.sid) {
    errors.sid = 'Required'
  } else if (isNaN(Number(values.sid))) {
    errors.sid = 'Must be a number'
  }
  return errors
}

const mapStateToProps = (state) => {
    return {
        applicationName: state.global.applicationName,
        environmentName: state.global.environmentName,
        ...state.authentication
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        register: (data) => {
            dispatch(register(data));
        },
    };
};

RegisterForm.propTypes = {
  fields: PropTypes.object.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  resetForm: PropTypes.func.isRequired
}

export default connect(mapStateToProps,mapDispatchToProps)(
  reduxForm({
    form: 'register',
    fields: ['email', 'password','sid','username'],
    validate
  })(RegisterForm)
);
